<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-11 09:45:09
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-11 10:39:15
 * @FilePath: \vue3-code\2306\week4\2.单个插槽 默认插槽.html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单个插槽 默认插槽</title>
    <!-- 引入vue.js -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 挂载点 id="app" -->
    <div id="app">
        <h1>我是父组件的标题</h1>
        <!-- 使用子组件 -->
        <my-component> 
            <!-- 替换默认插槽的内容 -->
            <p>内容1</p> 
            <p>内容2</p>
        </my-component>
    </div>
    <!-- 使用javascript 脚本 -->
    <script type="text/javascript">
        // 定义注册子组件
        Vue.component('my-component', {
            template: `<div>
                <h2>我是子组件的标题</h2>
                <!--  预留一个 单个(默认)插槽 -->
                <slot>
                    <p>默认插槽的内容</p>
                </slot>
            </div>`
        });
        // 创建Vue实例，并挂载到#app
        var app = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>